<template>
	<view>
<!-- 		<view class="sr_title">
			<view class="sr_title1">
				<view @tap="goBack">
					<image src="../../../static/img/zjt.png" mode="widthFix"></image>
					返回
				</view>
				<view>
					服务管理
				</view>
			</view>
		</view> -->

		<view class="content_box" v-if="list.length>0">
			<view class="content" v-for="(item,index) in list" :key="index">
				<view class="content_up">
					<view class="content_up_left">
						<up-image :show-loading="true" :src="item.icon" mode="aspectFill" width="140rpx"
							height="140rpx"></up-image>

					</view>
					<view class="content_up_right">
						<view class="title">
							<up-text :text="`${item.serviceName}`" :lines="2" size="32rpx"></up-text>


							<!-- <text>{{item.status? '已售':'待售'}}</text> -->
						</view>
						<view class="servicePrice"><text>￥{{(item.servicePrice).toFixed(2)}} /
								{{filterType(item.priceType)}}</text></view>
						<view class="discount">
							<text class="f24">￥</text>
							<text class="m_txt">{{(item.servicePrice*item.discount).toFixed(2)}} /
								{{filterType(item.priceType)}}</text>
							<up-tag :text="(item.discount*10).toFixed(1)+'折' " type="warning" size="mini"></up-tag>


						</view>

						<view class="des"><text>{{item.serviceTime}}</text></view>
					</view>

				</view>
				<view class="content_down">
					<view class="content_down_left">{{item.createTime}}</view>
					<view class="content_down_right">
						<!-- <view @click="iconClick(1)">
							<image src="../../../static/f/011.gif" mode="widthFix"></image>
							管理
						</view> -->
						<view></view>
						<view @click="onEdit(item)">
							<image src="../../../static/f/012.gif" mode="widthFix"></image>
							编辑
						</view>
						<view @click="onDel(item)">
							<image src="../../../static/f/013.gif" mode="widthFix"></image>
							删除
						</view>
					</view>
				</view>
			</view>
			<up-divider text="没有了"></up-divider>
		</view>
		<view v-if="list.length==0" class="empty_box">
			<up-empty mode="data" />
		</view>
		<view class="addFW" @click="goPage">
			<image src="../../../static/img/jia.png" mode="widthFix"></image>
		</view>
	</view>
	<up-modal :show="show" showCancelButton title="提示" :content='content' @confirm="confirm" @cancel="show=false"
		closeOnClickOverlay ref="uModal" :asyncClose="true"></up-modal>
</template>

<script>
	import {
		serviceListApi,
		serviceDelApi
	} from '@/api/service.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import basUrl from "@/config/config.js"
	import filterType from '@/utils/priceType.js'
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const state = reactive({
				content: '',
				list: [],
				isShou: false,
				show: false,
				row: ','
			})
			onLoad((option) => {
				getData()
			})



			const getData = async () => {
				const {
					data
				} = await serviceListApi()

				state.list = data.filter((item => item.isDeleted == 0))
			}
			const goBack = () => {
				uni.navigateBack(-1)
			}
			const goPage = () => {
				uni.navigateTo({
					url: '/pages/my/serviceList/serviceForm'
				})
			}
			// 编辑
			const onEdit = (row) => {
				uni.navigateTo({
					url: `/pages/my/serviceList/serviceForm?id=${row.id}`
				})
			}
			// 删除
			const onDel = (row) => {
				state.row = row
				state.show = true
				state.content = "确定要删除该条服务记录吗？"

			}
			const delApi = async () => {
				try {
					await serviceDelApi(state.row.id)
					setTimeout(() => {
						uni.$u.toast("删除成功！");
						state.show = false
						getData()
					}, 1000)

				} catch {
					state.show = false
				}



			}
			const confirm = () => {
				delApi()
			}

			return {
				...toRefs(state),
				goPage,
				onDel,
				delApi,
				confirm,
				onEdit,
				getData,
				filterType,
				goBack,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.sr_title {
		width: 100%;
		height: 180rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #38393E;
		z-index: 10;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.swiper {
		width: 100%;
		height: 5vh;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		.swiper1 {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			view {
				position: absolute;
				bottom: 0;
				left: 0 auto;
				width: 40%;
				height: 5rpx;
				background-color: #4FA870;
			}
		}
	}

	.content_box {
		// margin-top: 190rpx;
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));

	}

	.content {
		width: 100%;
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.content_up {
			height: 75%;
			display: flex;
			margin-bottom: 15rpx;

			.content_up_left {
				width: 140rpx;

			}

			.content_up_right {
				padding: 0 20rpx;


				.title {
					padding-right: 15rpx;
					margin-bottom: 10rpx;
				}

				.servicePrice {
					color: #999;
					font-size: 26rpx;
					text-decoration: line-through;

				}

				.des {
					font-size: 28rpx;
					color: #999;
				}

				.discount {
					display: flex;
					color: #ff8d01;

					.f24 {
						font-size: 24rpx;
					}

					.m_txt {
						padding: 0 15rpx;
					}

				}

				view {
					line-height: 40rpx;
				}





			}
		}

		.content_down {
			width: 100%;
			height: 25%;
			padding-top: 20rpx;
			border-top: 2rpx solid #eaeaea;
			display: flex;
			align-items: center;
			justify-content: center;

			.content_down_left {
				width: 30%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #999;
			}

			.content_down_right {
				width: 70%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 33%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #777;

					image {
						width: 20%;
						height: 100%;
						margin: 0 1%;
					}
				}
			}
		}
	}

	.addFW {
		width: 100rpx;
		height: 100rpx;
		background-color: #2FA95C;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 3%;
		right: 3%;

		image {
			width: 50%;
			height: 50%;
		}
	}
</style>